<template>
	<view class="container" :data-theme="themeStyle">
		<view class="level-top " :data-theme="themeStyle">
			<view class="head-img-wrap">
				<view class="">
					<view class="head-img">
						<image :src="fenxiaoInfo.headimg ? $util.img(fenxiaoInfo.headimg) : $util.getDefaultImage().default_headimg"
						 @error="fenxiaoInfo.headimg = $util.getDefaultImage().default_headimg" mode="aspectFill"></image>
					</view>
					<view class="head-bg ns-text-color" :style="{backgroundImage:'url(' + $util.img('upload/uniapp/fenxiao/level/bg2.png') + ')'}">
						{{ fenxiaoInfo.level_name }}
					</view>
				</view>
				<view class="level-info">
					{{ fenxiaoInfo.nickname }}
				</view>
			</view>
			<view class="level-list">
				<view class="level-list-box">
					<block v-for="(item,index) in levelList" :key="index">
						<view class="iconfont font-father" :class="index<levelIndex?'iconyuan_checkbox isSignin':index==levelIndex?'iconyuan_checked isSignin':'iconyuan_checkbox'">
							<view class="font-son">
								{{item.level_name}}
							</view>
						</view>
						<view class="xian" v-if="index != levelList.length-1" :class="index<levelIndex?'active':''"></view>
					</block>
				</view>
			</view>
			<view class="level-top-content">
				<view class="content-title-wrap">
					<view class="content-title ns-text-color">
						当前等级佣金比率
					</view>
				</view>
				<view class="level-img-item">
					<view class="level-img" v-if="Number(config.level)>0">
						<view class="level-img-wrap">
							<image :src="$util.img('upload/uniapp/fenxiao/level/money.png')"></image>
						</view>
						<view class="level-img2-wrap" :style="{backgroundImage:'url(' + $util.img('upload/uniapp/fenxiao/level/bg1.png') + ')'}">
							<view class="content-name">
								一级佣金
							</view>
						</view>
						
						<view class="level-fs">
							{{levelInfo.one_rate}}%
						</view>
					</view>
					<view class="level-img" v-if="Number(config.level)>1">
						<view class="level-img-wrap">
							<image :src="$util.img('upload/uniapp/fenxiao/level/money.png')"></image>
						</view>
						<view class="level-img2-wrap" :style="{backgroundImage:'url(' + $util.img('upload/uniapp/fenxiao/level/bg1.png') + ')'}">
							<view class="content-name">
								二级佣金
							</view>
						</view>
						
						<view class="level-fs">
							{{levelInfo.two_rate}}%
						</view>
					</view>
					<view class="level-img" v-if="Number(config.level)>2">
						<view class="level-img-wrap">
							<image :src="$util.img('upload/uniapp/fenxiao/level/money.png')"></image>
						</view>
						<view class="level-img2-wrap" :style="{backgroundImage:'url(' + $util.img('upload/uniapp/fenxiao/level/bg1.png') + ')'}">
							<view class="content-name">
								三级佣金
							</view>
						</view>
						<view class="level-fs">
							{{levelInfo.three_rate}}%
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="level-bottom" v-if="fenxiaoInfo.condition.last_level">
			<view class="level-bottom-name">
				距离下一等级：<text class="ns-text-color">{{ fenxiaoInfo.condition.last_level.level_name }}</text>
			</view>
			<view class="level-bottom-title">
				<block v-if="fenxiaoInfo.condition.last_level.upgrade_type == 1">
					<text class="line-left ns-bg-color"></text>满足以下任意条件<text class="line-right ns-bg-color"></text>
				</block>
				<block v-else>
					<text class="line-left ns-bg-color"></text>满足以下全部条件<text class="line-right ns-bg-color"></text>
				</block>
			</view>
			<view class="detail">
				<view class="detail-wrap">
					<view class="detail-title">
						<text>操作行为</text>
						<text>操作进度</text>
					</view>
					<view class="detail-item" v-if="fenxiaoInfo.condition.last_level.one_fenxiao_order_num > 0">
						<view class="detail-item-name">
							一级分销订单总数
						</view>
						<view class="detail-item-content">
							<text class="ns-text-color">{{ fenxiaoInfo.one_fenxiao_order_num}}</text> / {{ fenxiaoInfo.condition.last_level.one_fenxiao_order_num}}
						</view>
					</view>
					<view class="detail-item" v-if="fenxiaoInfo.condition.last_level.one_fenxiao_order_money > 0">
						<view class="detail-item-name">
							一级分销订单总额
						</view>
						<view class="detail-item-content">
							<text class="ns-text-color">{{ fenxiaoInfo.one_fenxiao_order_money ? fenxiaoInfo.one_fenxiao_order_money : 0}}</text> / {{ fenxiaoInfo.condition.last_level.one_fenxiao_order_money}}
						</view>
					</view>
					<view class="detail-item"  v-if="fenxiaoInfo.condition.last_level.order_num > 0">
						<view class="detail-item-name">
							自购订单总数
						</view>
						<view class="detail-item-content">
							<text class="ns-text-color">{{ fenxiaoInfo.order_num ? fenxiaoInfo.order_num : 0}}</text> / {{ fenxiaoInfo.condition.last_level.order_num}}
						</view>
					</view>
					<view class="detail-item"  v-if="fenxiaoInfo.condition.last_level.order_money > 0">
						<view class="detail-item-name">
							自购订单总额
						</view>
						<view class="detail-item-content">
							<text class="ns-text-color">{{ fenxiaoInfo.order_money ? fenxiaoInfo.order_money : 0}}</text> / {{ fenxiaoInfo.condition.last_level.order_money}}
						</view>
					</view>
					<view class="detail-item" v-if="fenxiaoInfo.condition.last_level.child_num > 0">
						<view class="detail-item-name">
							一级下线人数
						</view>
						<view class="detail-item-content" >
							<text class="ns-text-color">{{ fenxiaoInfo.child_num ? fenxiaoInfo.child_num : 0}}</text> / {{ fenxiaoInfo.condition.last_level.child_num}}
						</view>
					</view>
					<view class="detail-item"  v-if="fenxiaoInfo.condition.last_level.child_fenxiao_num > 0">
						<view class="detail-item-name">
							一级下线分销商
						</view>
						<view class="detail-item-content">
							<text class="ns-text-color">{{ fenxiaoInfo.child_fenxiao_num ? fenxiaoInfo.child_fenxiao_num : 0}}</text> / {{ fenxiaoInfo.condition.last_level.child_fenxiao_num}}
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>

</template>

<script>
	import fenxiaoWords from 'common/js/fenxiao-words.js';
	import globalConfig from '@/common/js/golbalConfig.js'
	export default {
		data() {
			return {
				fenxiaoInfo: {
					condition: {
						last_level: null
					}
				},
				levelInfo: {},
				config: {},
				levelList: []
			}
		},
		mixins: [fenxiaoWords,globalConfig],
		computed: {
			levelIndex() {
				let index = -1;
				let levelId = this.levelInfo.level_id
				let array = this.levelList;
				for (let i = 0; i < array.length; i++) {
					if (array[i].level_id == levelId) {
						index = i;
						break;
					}
				}
				return index;
			}
		},
		onLoad() {
			this.getFenxiaoLevel()
		},
		onShow() {
			this.$langConfig.refresh();
			uni.setNavigationBarTitle({
				title: this.fenxiaoWords.fenxiao_name + '等级'
			});

			if (uni.getStorageSync('token')) {
				this.getFenxiaoInfo();
				this.getBasicsConfig();
			} else {
				this.$util.redirectTo('/pages/login/login/login', {
					back: '/otherpages/fenxiao/level/level'
				});
			}
		},
		methods: {
			/**
			 * 获取分销等级信息
			 */
			getFenxiaoLevel() {
				this.$api.sendRequest({
					url: '/fenxiao/api/Level/lists',
					success: res => {
						if (res.code == 0 && res.data) {
							this.levelList = res.data
						}
					}
				})
			},


			/**
			 * 获取分销商信息
			 */
			getFenxiaoInfo() {
				this.$api.sendRequest({
					url: '/fenxiao/api/fenxiao/detail',
					success: res => {
						if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
						if (res.code >= 0 && res.data) {
							this.fenxiaoInfo = res.data;
							this.getLevelInfo();
						} else {
							this.$util.redirectTo('/otherpages/fenxiao/apply/apply');
						}
					},
					fail: () => {
						if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
					}
				})
			},
			getLevelInfo() {
				this.$api.sendRequest({
					url: '/fenxiao/api/fenxiao/level',
					data: {
						level: this.fenxiaoInfo.level_id
					},
					success: res => {
						if (res.code >= 0) {
							this.levelInfo = res.data;
						}
					}
				})
			},
			/**
			 * 获取分销基本配置
			 */
			getBasicsConfig() {
				this.$api.sendRequest({
					url: '/fenxiao/api/config/basics',
					success: res => {
						if (res.code >= 0) {
							this.config = res.data;
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	@mixin wrap {
		position: relative;
	}

	.level-top {
		height: 800rpx;
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		position: relative;
		background-color: #FF4544;
		
		.head-img-wrap {
			flex: 2;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			padding-top: 50px;

			.head-img {
				width: 120rpx;
				height: 120rpx;
				border-radius: 50%;
				border: 6rpx solid #FFFFFF;
				box-sizing: border-box;
				margin: auto;

				image {
					width: 100%;
					height: 100%;
					border-radius: 50%;
				}
			}

			.head-bg {
				height: 40rpx;
				margin-top: -20rpx;
				background-size: 100% 100%;
				position: relative;
				font-size: $ns-font-size-base;
				text-align: center;
				line-height: 50rpx;
				min-width: 120rpx;
				padding: 0 $ns-padding;
				box-sizing: border-box;
				color:#C37D2B !important
			}

			.level-info {
				color: #FFFFFF;
				font-size: $ns-font-size-x-lg;
				margin-top: $ns-margin;
			}
		}

		.level-list {
			width: 100%;
			height: 120rpx;


			.level-list-box {
				display: flex;
				justify-content: center;
				align-items: center;

				.iconfont {
					display: flex;
					flex-direction: column;
					align-items: center;
					font-size: $ns-font-size-xxx-lg;
					color: rgba($color: #ffffff, $alpha: 0.6);
					line-height: 1;
				}

				.isSignin {
					color: #FFFFFF;
				}

				.xian {
					width: 100rpx;
					border: 1rpx solid rgba($color: #ffffff, $alpha: 0.6);
				}
				.xian.active{
					border: 1rpx solid #ffffff;
				}
				.font-father{
					position: relative;
				}
				.font-son{
					width: 150rpx;
					height:50rpx;
					bottom:-60rpx;
					left: -30rpx;
					text-align: center;
					line-height: 50rpx;
					color: #ffffff;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}

				.level-item-name {
					color: #FFFFFF;
					padding: 20rpx 50rpx;
				}

			}
		}
		.level-top-content {
			background-color: #FFFFFF;
			flex: 2;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			width: 95%;
			margin-bottom: 30rpx;
			border-radius: 10rpx;

			.content-title-wrap {
				flex: 1;

				.content-title {
					padding-top: 20rpx;
					padding-bottom: 20rpx;
				}
			}

			.level-img-item {
				flex: 3;
				display: flex;
				justify-content: center;
				align-items: center;
				width: 100%;
				margin-bottom: 20rpx;

				.level-img {
					width: 30%;
					position: relative;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;

					.level-img-wrap {
						width: 88rpx;
						height: 88rpx;
						border-radius: 50%;
						border: 1rpx solid #E5E5E5;
						background-color: #FFFFFF;
						display: flex;
						justify-content: center;
						align-items: center;

						image {
							width: 60rpx;
							height: 60rpx;
						}
					}

					.level-img2-wrap {
						width: 120rpx;
						height: 40rpx;
						background-size: 100% 100%;
						background-repeat: no-repeat;
						text-align: center;
						line-height: 30rpx;
						margin-top: -6rpx;
					}

					.content-name {
						position: relative;
						width: 100%;
						height: 100%;
						display: flex;
						justify-content: center;
						align-items: center;
						color: #FFFFFF;
						font-size: $ns-font-size-x-sm;
						margin-top:-4rpx;
					}

					.level-fs {
						font-size: $ns-font-size-lg;
					}
				}
			}
		}
	}

	.detail-wrap .detail-item:nth-child(2n+1) {
		background-color: #f7f8fa;
	}

	.level-bottom {
		display: flex;
		flex-direction: column;
		background-color: #FFFFFF;
		height: 50%;
		

		.level-bottom-name {
			color: $ns-text-color-gray;
			font-size: $ns-font-size-lg;
			padding:28rpx 24rpx;
			
			text {
				padding-left: 5rpx;
			}
		}

		.level-bottom-title {
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 0px 24rpx 28rpx;

			text {
				width: 100rpx;
				height:2px;
				opacity: 0.3;
			}
			.line-left{margin-right:10px;}
			.line-right{margin-left:10px;}
			
		}

		.detail {
			display: flex;
			flex-direction: column;

			.detail-wrap {
				display: flex;
				flex-direction: column;
				padding-bottom: 140rpx;
				
				.detail-title {
					
					display: flex;
					justify-content: center;
					align-items: center;
					padding: 0 24rpx 8rpx;

					text {
						flex: 1;
						display: flex;
						justify-content: center;
						align-items: center;
					}
				}

				.detail-item {
					
					display: flex;
					justify-content: center;
					align-items: center;
					padding: 8rpx 24rpx;
					
					.detail-item-name {
						flex: 1;
						color: $ns-text-color-gray;
						display: flex;
						justify-content: center;
						align-items: center;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}

					.detail-item-content {
						flex: 1;
						color: $ns-text-color-gray;
						display: flex;
						justify-content: center;
						align-items: center;
						
						text{
							margin-right: 4rpx;
						}
					}
				}
			}
		}
	}

	// // .wrap{
	// 	@include wrap;
	// 	background-color: #fff;

	// 	.title{
	// 		font-weight: 600;
	// 	}

	// 	.commission-ratio{
	// 		margin-top: 20rpx;
	// 		padding: 0 20rpx;
	// 		border: 1px solid #f5f5f5;
	// 		border-radius: $ns-border-radius;

	// 		.item{
	// 			display: flex;
	// 			border-bottom: 1px solid #eee;
	// 			height: 80rpx;
	// 			align-items: center;

	// 			&:last-child{
	// 				border-bottom: none;
	// 			}

	// 			view{
	// 				flex: 1;

	// 				&:first-child{
	// 					font-weight: 600;
	// 				}

	// 				&:last-child{
	// 					text-align: right;
	// 				}
	// 			}
	// 		}
	// 	}
	// }
</style>
